<template>
    <div class="detail1"></div>
</template>

<style lang="less" scoped>
.detail1 {
    height: 200px;
    width: 100%;
    text-align: center;
}
</style>
<script>
export default {
    name: 'detailChart1',
    props: {
        data: Array
    },
    data() {
        return {
            detailChart1: null
        }
    },
    methods: {
        setChart() {
            let option = {
                title: {
                    text: "进料量",
                    left: "right",
                    textStyle: {
                        fontSize: 15
                    }
                },
                animation: false, //控制不要动画
                legend: {},
                tooltip: {
                    trigger: 'axis',
                    // showContent: false
                },
                dataset: {
                    // source: [
                    //     ['时间段', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                    //     ['传感器1', 56.5, 82.1, 88.7, 70.1, 53.4, 85.1, 80],
                    //     ['传感器2', 51.1, 51.4, 55.1, 53.3, 73.8, 68.7, 15.5],
                    //     ['传感器3', 40.1, 62.2, 69.5, 36.4, 45.2, 32.5, 55.3],
                    //     ['传感器14', 25.2, 37.1, 41.2, 18, 33.9, 49.1, 77.9],
                    // ]
                    source: this.data
                },
                xAxis: { type: 'category' },
                yAxis: { gridIndex: 0 },
                grid: {
                    top: '10%'
                },
                series: [
                    {
                        type: 'line',
                        smooth: true,
                        seriesLayoutBy: 'row',
                        emphasis: { focus: 'series' }
                    },
                    {
                        type: 'line',
                        smooth: true,
                        seriesLayoutBy: 'row',
                        emphasis: { focus: 'series' }
                    },
                    {
                        type: 'line',
                        smooth: true,
                        seriesLayoutBy: 'row',
                        emphasis: { focus: 'series' }
                    },
                    {
                        type: 'line',
                        smooth: true,
                        seriesLayoutBy: 'row',
                        emphasis: { focus: 'series' }
                    }
                ]
            };
            if (!this.detailChart1) this.detailChart1 = this.$echarts(this.$el);
            this.detailChart1.clear();
            this.detailChart1.resize()
            this.detailChart1.setOption(option);
        },
    },
    mounted() {
        this.setChart();
        this.intervalId = setInterval(() => {
            this.setChart();
            // this.detailChart1.setOption({dataset: {
            //         source: this.data
            //     },
            // });
        }, 2000);
    }
}
</script>
